<template>
	<view>
		<u-navbar :is-back="true" :custom-back="BackM" title="查询设备归属" back-text="">
			<view class="slot-right" style="width: 100%; display: flex; justify-content: flex-end">
				<view style="padding: 0rem 0.5rem; display: flex; align-items: center">
					<view style="
              font-size: 0.75rem;
              font-family: PingFang SC;
              font-weight: 300;
              color: #02af74;
            "></view>
					<image @click="scanM" style="width: 1rem; height: 0.9rem; padding: 0.6rem" src="../../style/image/equiptment/scan2.png"
					 alt="" />
				</view>
			</view>
		</u-navbar>

		<view class="scanP">
			<view class="scanP-title">·方法一·</view>
			<view class="scanP-intro">输入设备SN码，输入完成后，点击查询</view>

			<u-input v-model="inputValue" :type="type" placeholder="请输入设备SN码" />
		</view>

		<view class="scanP">
			<view class="scanP-title">·方法二·</view>
			<view class="scanP-intro">点击右上角，扫描设备底座SN码</view>
		</view>

		<view class="footP">
			<view @click="belongDetailedM" style="padding: 0.7rem; display: flex; align-items: center">
				<!-- <image style="width: 1rem;" src="../../style/image/cargo/add.jpg" alt=""> -->
				<view style="color: white; margin-left: 0.2rem">确认查询</view>
			</view>
		</view>
	</view>
</template>

<script lang='ts'>
	import {
		Component,
		Prop,
		Vue,
		Watch,
		Emit
	} from "vue-property-decorator";

	import uNavbar from "@/uview-ui/components/u-navbar/u-navbar.vue";

	import {
		findTerminalBySn
	} from "../../utils/uniApi";

	@Component({
		//   @Component  是一个装修器   不可以在下面写语句
		name: "test",
		components: {
			"u-navbar": uNavbar,
		},
	})
	export default class extends Vue {
		@Prop({
			type: String, // 父组件传递给子组件的数据类型
			required: false, // 是否必填
			default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
		})
		msg!: string;

		public inputValue: any = "";
		public type = "text";

		created() {}

		mounted() {
			//  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
		}

		belongDetailedM() {
			let params = {
				userId: uni.getStorageSync("userId") == "" ?
					"" :
					parseInt(uni.getStorageSync("userId")),
				sn: this.inputValue,
			};
			findTerminalBySn(params).then((res: any) => {
				console.log("res", res);

				if (res.data.code == 200) {


					let data = res.data.data
					uni.navigateTo({
						url: `../equipment/belongDetailed?data=${JSON.stringify(data)}`,
					});

				}
			});
		}

		BackM() {

			console.log(888);
			uni.switchTab({
				url: "../equipment/index",
			});
		}

		scanM() {
			var that=this
			uni.scanCode({
			  success: function (res:any) {

			    console.log(JSON.stringify(res));

			          var value:any={
			             sn:res.result
			           }

			           that.inputValue=value.sn
			  },
			});
			//二维码扫描设备编号

			// var that = this;
			// uni.scanCode({
			// 	success: function(res) {
			// 		this.deviceSn = res.result
			// 	},
			// });
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-input {
		margin: 1rem;
		border-color: rgb(220, 223, 230);
		text-align: left;
		background-color: #f7f7f7;
	}

	.scanP-title {
		font-size: 0.89rem;
		font-family: PingFang SC;
		font-weight: 400;
		color: #02af74;
		text-align: center;
		margin: 1rem;
	}

	.scanP-intro {
		font-size: 0.84rem;
		font-family: PingFang SC;
		font-weight: 300;
		color: #000000;
		text-align: center;
		margin: 1rem;
	}

	>>>.u-input {
		padding: 0px;
		border-color: rgb(220, 223, 230);
		text-align: left;
		background-color: #f3f5f7;
		border-radius: 5px;
		margin: 1rem;
	}

	.footP {
		position: absolute;
		bottom: 0;
		background-color: #02af74;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>
